<template>
    <div>
        <div class="msgbox">
            <div class="top">
                <div class="bord">消息</div>
                <div class="more" @click="opentc">
                    <span>更多</span
                    ><img src="../../assets/image/andmore.png" alt="" />
                </div>
            </div>
            <div class="msglist">
                <div
                    class="msgitem"
                    v-for="(ele, index) in messagelist"
                    :key="index"
                >
                    <div class="date">
                        {{
                            dayjs(ele.createTime.toString()).format(
                                'YYYY-MM-DD'
                            )
                        }}
                    </div>
                    <div class="blue" v-show="ele.businessType === 0">
                        签单类型
                    </div>
                    <div class="blue" v-show="ele.businessType === 1">
                        充值类型
                    </div>
                    <div class="blue" v-show="ele.businessType === 2">
                        续费类型
                    </div>
                    <div class="blue" v-show="ele.businessType === 3">
                        人员相关
                    </div>
                    <div class="blue" v-show="ele.businessType === 4">
                        日日保报案
                    </div>
                    <div class="blue" v-show="ele.businessType === 5">
                        长期保报案
                    </div>
                    <div class="blue" v-show="ele.businessType === 6">
                        日保上传材料
                    </div>
                    <div class="blue" v-show="ele.businessType === 7">
                        长期保上传材料
                    </div>
                    <div class="blue" v-show="ele.businessType === 8">
                        日保派遣单位审核
                    </div>
                    <div class="blue" v-show="ele.businessType === 9">
                        长期保派遣单位审核
                    </div>
                    <div class="line"></div>
                    <div class="msgtext">
                        {{
                            (ele.createUserName === null
                                ? '--'
                                : ele.createUserName) +
                            '跟进的客户' +
                            ele.companyName
                        }}
                    </div>
                </div>
            </div>
        </div>
        <el-drawer
            v-model="tcflag"
            class="drawer"
            title="消息"
            direction="rtl"
            :size="isMobile ? '100%' : '30%'"
        >
            <template #header="{ close, titleId, titleClass }">
                <div class="messageselect">
                    <h4 :id="titleId" :class="titleClass">消息</h4>
                    <el-select
                        v-model="selectmessagetype"
                        class="m-2"
                        placeholder="Select"
                        @change="getmessagelist"
                        size="small"
                        style="width: 150px"
                    >
                        <el-option
                            v-for="item in messagetypeoptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
            </template>
            <div class="closedrawer" @click="tcflag = false">
                <span>收</span><span>起</span
                ><img src="../../assets/image/组355.png" alt="" />
            </div>
            <div class="tcbox">
                <div
                    class="tcboxitem"
                    v-show="ele.businessType === 0 && ele.status === 1"
                    v-for="(ele, i) in messagelist"
                    :key="i"
                >
                    <div class="time">
                        {{
                            dayjs(ele.createTime.toString()).format(
                                'YYYY年MM月DD日 HH:mm:ss'
                            )
                        }}
                    </div>
                    <div class="top">成单通知</div>
                    <div class="msginfo">
                        <div class="cdmsg">
                            你跟进的客户
                            <span class="bord">{{ ele.companyName }}</span>
                            开通了
                            <span v-show="ele.amtProduct === 0" class="bord"
                                >「子弹发薪」</span
                            >
                            <span v-show="ele.amtProduct === 1" class="bord"
                                >「电子签」</span
                            >
                            <span v-show="ele.amtProduct === 2" class="bord"
                                >「日日保」</span
                            >
                            <span v-show="ele.amtProduct === 3" class="bord"
                                >「长期保」</span
                            >
                            <span v-show="ele.amtProduct === 4" class="bord"
                                >「微聘」</span
                            >
                            <span v-show="ele.amtProduct === 5" class="bord"
                                >「微保」</span
                            >
                            <span v-show="ele.amtProduct === 6" class="bord"
                                >「团意日保」</span
                            >
                            <span v-show="ele.amtProduct === 7" class="bord"
                                >「短信群发」</span
                            >
                            服务；
                        </div>
                        <div class="lablebox">
                            <div class="lable">操作人：</div>
                            <div class="lablecontent">
                                {{
                                    ele.createUserName
                                        ? ele.createUserName
                                        : '--'
                                }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">操作时间：</div>
                            <div class="lablecontent">
                                {{
                                    dayjs(ele.createTime.toString()).format(
                                        'YYYY-MM-DD HH:mm:ss'
                                    )
                                }}
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="tcboxitem"
                    v-show="ele.businessType === 0 && ele.status === 0"
                    v-for="(ele, i) in messagelist"
                    :key="i"
                >
                    <div class="time">
                        {{
                            dayjs(ele.createTime.toString()).format(
                                'YYYY年MM月DD日 HH:mm:ss'
                            )
                        }}
                    </div>
                    <div class="top">关闭服务通知</div>
                    <div class="msginfo">
                        <div class="cdmsg">
                            你跟进的客户
                            <span class="bord">{{ ele.companyName }}</span>
                            关闭了
                            <span v-show="ele.amtProduct === 0" class="bord"
                                >「子弹发薪」</span
                            >
                            <span v-show="ele.amtProduct === 1" class="bord"
                                >「电子签」</span
                            >
                            <span v-show="ele.amtProduct === 2" class="bord"
                                >「日日保」</span
                            >
                            <span v-show="ele.amtProduct === 3" class="bord"
                                >「长期保」</span
                            >
                            <span v-show="ele.amtProduct === 4" class="bord"
                                >「微聘」</span
                            >
                            <span v-show="ele.amtProduct === 5" class="bord"
                                >「微保」</span
                            >
                            <span v-show="ele.amtProduct === 6" class="bord"
                                >「团意日保」</span
                            >
                            <span v-show="ele.amtProduct === 7" class="bord"
                                >「短信群发」</span
                            >
                            服务；
                        </div>
                        <div class="lablebox">
                            <div class="lable">操作人：</div>
                            <div class="lablecontent">
                                {{
                                    ele.createUserName
                                        ? ele.createUserName
                                        : '--'
                                }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">操作时间：</div>
                            <div class="lablecontent">
                                {{
                                    dayjs(ele.createTime.toString()).format(
                                        'YYYY-MM-DD HH:mm:ss'
                                    )
                                }}
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="tcboxitem"
                    v-show="ele.businessType === 2"
                    v-for="(ele, i) in messagelist"
                    :key="i"
                >
                    <div class="time">
                        {{
                            dayjs(ele.createTime.toString()).format(
                                'YYYY年MM月DD日 HH:mm:ss'
                            )
                        }}
                    </div>
                    <div class="top">续费通知</div>
                    <div class="msginfo">
                        <div class="cdmsg">
                            你跟进的客户
                            <span class="bord">{{ ele.companyName }}</span>
                            续费了
                            <span v-show="ele.amtProduct === 0" class="bord"
                                >「子弹发薪」</span
                            >
                            <span v-show="ele.amtProduct === 1" class="bord"
                                >「电子签」</span
                            >
                            <span v-show="ele.amtProduct === 2" class="bord"
                                >「日日保」</span
                            >
                            <span v-show="ele.amtProduct === 3" class="bord"
                                >「长期保」</span
                            >
                            <span v-show="ele.amtProduct === 4" class="bord"
                                >「微聘」</span
                            >
                            <span v-show="ele.amtProduct === 5" class="bord"
                                >「微保」</span
                            >
                            <span v-show="ele.amtProduct === 6" class="bord"
                                >「团意日保」</span
                            >
                            <span v-show="ele.amtProduct === 7" class="bord"
                                >「短信群发」</span
                            >
                            服务；
                        </div>
                        <div class="lablebox">
                            <div class="lable">操作人：</div>
                            <div class="lablecontent">
                                {{
                                    ele.createUserName
                                        ? ele.createUserName
                                        : '--'
                                }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">操作时间：</div>
                            <div class="lablecontent">
                                {{
                                    dayjs(ele.createTime.toString()).format(
                                        'YYYY-MM-DD HH:mm:ss'
                                    )
                                }}
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="tcboxitem"
                    v-show="ele.businessType === 1"
                    v-for="(ele, i) in messagelist"
                    :key="i"
                >
                    <div class="time">
                        {{
                            dayjs(ele.createTime.toString()).format(
                                'YYYY年MM月DD日 HH:mm:ss'
                            )
                        }}
                    </div>
                    <div class="top">客户付款通知</div>
                    <div class="fkbox">
                        <div class="fkjetext">付款金额</div>
                        <div class="fkjenum">¥{{ ele.amount }}</div>
                    </div>
                    <div class="msginfo">
                        <div class="lablebox">
                            <div class="lable">付款客户：</div>
                            <div class="lablecontent">
                                {{ ele.companyName }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">付款方式：</div>
                            <div class="lablecontent">{{ ele.msgContent }}</div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">收款账户：</div>
                            <div class="lablecontent">{{ ele.bankName }}</div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">收款汇总：</div>
                            <div class="lablecontent">
                                当日收款{{ ele.totalCnt }}笔，共<span
                                    class="lightyellow"
                                    >{{ ele.totalAmt }}</span
                                >元
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="tcboxitem"
                    v-show="ele.businessType === 3"
                    v-for="(ele, i) in messagelist"
                    :key="i"
                >
                    <div class="time">
                        {{
                            dayjs(ele.createTime.toString()).format(
                                'YYYY年MM月DD日 HH:mm:ss'
                            )
                        }}
                    </div>
                    <div class="top">离职交接通知</div>
                    <div class="msginfo">
                        <div class="cdmsg">
                            已将
                            <span class="bord">韩翠花</span>
                            的所有数据交接给<span class="bord">肖战</span>
                            ，生效时间为
                            <span class="bord">2022年08月16日</span> ；
                        </div>
                        <div class="lablebox">
                            <div class="lable">操作人：</div>
                            <div class="lablecontent">
                                {{
                                    ele.createUserName
                                        ? ele.createUserName
                                        : '--'
                                }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">操作时间：</div>
                            <div class="lablecontent">
                                {{
                                    dayjs(ele.createTime.toString()).format(
                                        'YYYY-MM-DD HH:mm:ss'
                                    )
                                }}
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="tcboxitem"
                    v-show="ele.businessType === 4"
                    v-for="(ele, i) in messagelist"
                    :key="i"
                >
                    <div class="time">
                        {{
                            dayjs(ele.createTime.toString()).format(
                                'YYYY年MM月DD日 HH:mm:ss'
                            )
                        }}
                    </div>
                    <div class="top">
                        <span>日日保报案</span
                        ><span
                            class="dark"
                            @click="tomessagedetail(ele.businessType)"
                            >查看详情<img
                                class="moreimg"
                                src="../../assets/image/andmore.png"
                                alt=""
                        /></span>
                    </div>
                    <div class="msginfo" v-if="ele.businessMsg">
                        <div class="cdmsg">
                            {{
                                ele.businessMsg[0] === 'null'
                                    ? '--'
                                    : ele.businessMsg[0]
                            }}
                        </div>
                        <div class="lablebox">
                            <div class="lable">派遣单位：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[1] }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">出险人：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[2] }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">出险时间：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[3] }}
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="tcboxitem"
                    v-show="ele.businessType === 5"
                    v-for="(ele, i) in messagelist"
                    :key="i"
                >
                    <div class="time">
                        {{
                            dayjs(ele.createTime.toString()).format(
                                'YYYY年MM月DD日 HH:mm:ss'
                            )
                        }}
                    </div>
                    <div class="top">
                        <span>长期保报案</span
                        ><span
                            class="dark"
                            @click="tomessagedetail(ele.businessType)"
                            >查看详情<img
                                class="moreimg"
                                src="../../assets/image/andmore.png"
                                alt=""
                        /></span>
                    </div>
                    <div class="msginfo" v-if="ele.businessMsg">
                        <div class="cdmsg">
                            {{
                                ele.businessMsg[0] === 'null'
                                    ? '--'
                                    : ele.businessMsg[0]
                            }}
                        </div>
                        <div class="lablebox">
                            <div class="lable">派遣单位：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[1] }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">出险人：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[2] }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">出险时间：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[3] }}
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="tcboxitem"
                    v-show="ele.businessType === 6"
                    v-for="(ele, i) in messagelist"
                    :key="i"
                >
                    <div class="time">
                        {{
                            dayjs(ele.createTime.toString()).format(
                                'YYYY年MM月DD日 HH:mm:ss'
                            )
                        }}
                    </div>
                    <div class="top">
                        <span>日保上传材料</span
                        ><span
                            class="dark"
                            @click="tomessagedetail(ele.businessType)"
                            >查看详情<img
                                class="moreimg"
                                src="../../assets/image/andmore.png"
                                alt=""
                        /></span>
                    </div>
                    <div class="msginfo" v-if="ele.businessMsg">
                        <div class="cdmsg">
                            {{
                                ele.businessMsg[0] === 'null'
                                    ? '--'
                                    : ele.businessMsg[0]
                            }}
                        </div>
                        <div class="lablebox">
                            <div class="lable">出险人：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[1] }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">出险时间：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[2] }}
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="tcboxitem"
                    v-show="ele.businessType === 7"
                    v-for="(ele, i) in messagelist"
                    :key="i"
                >
                    <div class="time">
                        {{
                            dayjs(ele.createTime.toString()).format(
                                'YYYY年MM月DD日 HH:mm:ss'
                            )
                        }}
                    </div>
                    <div class="top">
                        <span>长期保上传材料</span
                        ><span
                            class="dark"
                            @click="tomessagedetail(ele.businessType)"
                            >查看详情<img
                                class="moreimg"
                                src="../../assets/image/andmore.png"
                                alt=""
                        /></span>
                    </div>
                    <div class="msginfo" v-if="ele.businessMsg">
                        <div class="cdmsg">
                            {{
                                ele.businessMsg[0] === 'null'
                                    ? '--'
                                    : ele.businessMsg[0]
                            }}
                        </div>
                        <div class="lablebox">
                            <div class="lable">出险人：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[1] }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">出险时间：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[2] }}
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="tcboxitem"
                    v-show="ele.businessType === 8"
                    v-for="(ele, i) in messagelist"
                    :key="i"
                >
                    <div class="time">
                        {{
                            dayjs(ele.createTime.toString()).format(
                                'YYYY年MM月DD日 HH:mm:ss'
                            )
                        }}
                    </div>
                    <div class="top">
                        <span>日保派遣单位审核</span
                        ><span
                            class="dark"
                            @click="tomessagedetail(ele.businessType)"
                            >查看详情<img
                                class="moreimg"
                                src="../../assets/image/andmore.png"
                                alt=""
                        /></span>
                    </div>
                    <div class="msginfo" v-if="ele.businessMsg">
                        <div class="cdmsg">
                            {{
                                ele.businessMsg[0] === 'null'
                                    ? '--'
                                    : ele.businessMsg[0]
                            }}
                        </div>
                        <div class="lablebox">
                            <div class="lable">派遣单位：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[1] }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">审核状态：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[2] }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">保险类型：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[3] }}
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="tcboxitem"
                    v-show="ele.businessType === 9"
                    v-for="(ele, i) in messagelist"
                    :key="i"
                >
                    <div class="time">
                        {{
                            dayjs(ele.createTime.toString()).format(
                                'YYYY年MM月DD日 HH:mm:ss'
                            )
                        }}
                    </div>
                    <div class="top">
                        <span>长期保派遣单位审核</span
                        ><span
                            class="dark"
                            @click="tomessagedetail(ele.businessType)"
                            >查看详情<img
                                class="moreimg"
                                src="../../assets/image/andmore.png"
                                alt=""
                        /></span>
                    </div>
                    <div class="msginfo" v-if="ele.businessMsg">
                        <div class="cdmsg">
                            {{
                                ele.businessMsg[0] === 'null'
                                    ? '--'
                                    : ele.businessMsg[0]
                            }}
                        </div>
                        <div class="lablebox">
                            <div class="lable">派遣单位：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[1] }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">审核状态：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[2] }}
                            </div>
                        </div>
                        <div class="lablebox">
                            <div class="lable">保险类型：</div>
                            <div class="lablecontent">
                                {{ ele.businessMsg[3] }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <template #footer>
                <div class="tcfooter">
                    <el-pagination
                        :current-page="currentPage"
                        :page-size="pageSize"
                        :page-sizes="[10, 30, 50]"
                        layout="total, sizes, prev, pager, next"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </div>
            </template>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { getmessagelistapi } from '../../api/api'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const isMobile = ref((window as any).isMobile)

onMounted(() => {
    getmessagelist()
})

const tomessagedetail = (i: any) => {
    console.log(i)
    if (i === 4 || i === 5) {
        tobacl()
    } else if (i === 7 || i === 6) {
        tobacl()
    } else if (i === 8 || i === 9) {
        topqdwsp()
    }
}
const tobacl = () => {
    router.push({ path: '/reportClaimAdjuster' })
}
const topqdwsp = () => {
    router.push({ path: '/approval', query: { current: 0 } })
}
const handleSizeChange = (val: any) => {
    console.log(val)
    pageSize.value = val
    currentPage.value = 1
    getmessagelist()
}
const handleCurrentChange = (val: any) => {
    console.log(val)
    currentPage.value = val
    getmessagelist()
}
const opentc = () => {
    getmessagelist()
    tcflag.value = true
}
const tcflag = ref(false)
const selectmessagetype = ref('')
const messagetypeoptions = ref<any>([
    { label: '全部', value: '' },
    { label: '案件资料上传', value: '1' },
    { label: '充值审核', value: '2' },
    { label: '派遣单位审批', value: '3' }
])
const getmessagelist = () => {
    getmessagelistapi({
        pageSize: pageSize.value,
        pageNum: currentPage.value,
        queryBusinessType: selectmessagetype.value
    }).then((res: any) => {
        console.log(res, '消息列表')
        messagelist.value = res.rows
        messagelist.value.forEach((ele: any, i: any) => {
            if (ele.businessMsg && ele.businessMsg !== null) {
                ele.businessMsg = ele.businessMsg.split(';')
            }
        })
        total.value = res.total
    })
}
const messagelist = ref<any>([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
</script>

<style scoped lang="scss">
.msgbox {
    background-color: #ffffff;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px;

    .msglist {
        height: 100px;
        overflow-y: scroll;

        .msgitem {
            cursor: pointer;
            width: 100%;
            display: flex;
            align-items: center;
            font-size: 14px;
            margin-bottom: 12px;

            .date {
                margin-right: 5px;
            }

            .line {
                width: 1px;
                background-color: #3d3d3d;
                height: 14px;
                margin: 0 5px;
            }

            .msgtext {
                flex: 1;
                flex-shrink: 0;
                overflow: hidden; //超出的文本隐藏
                text-overflow: ellipsis; //溢出用省略号显示
                white-space: nowrap; //溢出不换行
            }
        }
    }

    .top {
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .bord {
            font-weight: 700;
            font-size: 16px;
        }

        .more {
            cursor: pointer;
            color: #9497b1;
            font-size: 12px;

            img {
                margin-left: 5px;
            }
        }
    }
}

.blue {
    color: #3e5ff5;
}

.tcbox {
    border-top: 1px solid #f4f4f7;
    padding-top: 0px;
    margin-top: 25px;

    .tcboxitem {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #f4f4f7;
        border-radius: 8px;
        margin-bottom: 50px;
        position: relative;

        .fkbox {
            margin-top: 16px;
            width: 100%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            .fkjetext {
                color: #9497b1;
                font-size: 14px;
            }

            .fkjenum {
                color: #ff7642;
                font-size: 26px;
                font-weight: 700;
            }
        }

        .msginfo {
            padding: 16px;
            box-sizing: border-box;
            width: 100%;

            .lablebox {
                font-size: 14px;
                display: flex;
                align-items: center;
                margin-bottom: 16px;

                .lable {
                    color: #9497b1;
                    width: 80px;
                }

                .lablecontent {
                    color: #202536;
                }
            }

            .cdmsg {
                font-size: 14px;
                color: #565868;
                margin-bottom: 16px;

                .bord {
                    font-weight: 700;
                    color: #202536;
                }
            }
        }

        .top {
            font-size: 14px;
            color: #3e5ff5;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-right: 20px;
            width: 100%;
            box-sizing: border-box;
            padding-left: 18px;
            background-color: #e6eeff;
            height: 42px;
            border-top-right-radius: 8px;
            border-top-left-radius: 8px;
            .moreimg {
                margin-left: 5px;
            }
        }

        .time {
            position: absolute;
            left: 0;
            top: -50px;
            width: 100%;
            box-sizing: border-box;
            color: #9497b1;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50px;
        }
    }
}

.drawer {
    .closedrawer {
        cursor: pointer;
        position: fixed;
        top: 50px;
        right: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 59px;
        background-color: #0256ff;
        font-size: 14px;
        color: #ffffff;

        img {
            margin-top: 5px;
        }
    }
}
.messageselect {
    display: flex;
    align-items: center;
    // :deep(.el-input__wrapper) {
    //     border: none !important;
    //     box-shadow: none !important;
    // }
    // :deep(.el-select--large:hover) {
    //     box-shadow: none !important;
    //     border: none !important;
    // }
    // :deep(.el-select .el-input.is-focus .el-input__wrapper) {
    //     box-shadow: none !important;
    //     border: none !important;
    // }
}
.dark {
    color: #9497b1 !important;
}
</style>
